<template>
  <div ref="questionR" @mouseenter="enterBox" @mouseleave="leaveBox" class="question_box"
    :style="{ left: qLeft + 'px', top: qTop + 'px' }" v-show="dataList.question">
    <img class="close" @click="closeQuestion" src="../../assets/home/close.png" alt="" />
    <h3>调查问卷</h3>
    <img class="q_icon" src="../../assets/home/q-icon.png" alt="" />
    <button @click="goQuestion">立即填写</button>
  </div>

  <div class="home_box">
    <div class="home_top wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
      <div class="home_top_item" v-for="(item, index) in topTab" :key="index" @click="goUserCenter(item)">
        <img :src="item.img" alt="" />
        <div>
          <p>{{ item.text }}</p>
          <span>{{ item.en }}</span>
        </div>
      </div>
    </div>

    <div class="home_center wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <div class="center_left">
        <div class="video_top">
          <div class="video_box">
            <video poster="../../assets/home/cover-video.png" ref="videoDom" controls @pause="dataList.isPlay = false"
              @seeking="dataList.isPlay = true">
              <source src="../../assets/home/home-video.mp4" type="video/mp4" />
            </video>
            <div class="mask flex-center" v-if="!dataList.isPlay">
              <img src="@/assets/home/icon-control-play.png" class="icon-control" @click.stop="playVideo" />
            </div>
          </div>
          <div class="intro">
            <div class="intro-title">资源库介绍</div>
            <el-scrollbar>
              <p class="intro-content">
                {{ dataList.introduced }}
              </p>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="center_right">
        <div class="feature">
          <div class="ri_title">特色资源</div>
          <nav>
            <li v-for="(feature, index) in featureList" :key="index + 1000" @click="gomore(feature.url)">
              <div class="img-wrap"><img :src="feature.img" alt="" /></div>
              <p>{{ feature.text }}</p>
            </li>
          </nav>
        </div>

        <div class="industry">
          <div class="ri_title">行业动态</div>
          <el-scrollbar>
            <nav>
              <p @click="goNewsDetail(news.content)" class="news-item" v-for="(news, index) in industryList"
                :key="index + 2000">
                <span class="desc">{{ news.title }}</span>
                <span class="date">{{ news.create_time }}</span>
              </p>
            </nav>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <div class="home_count wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
      <div class="home_count_item">
        <img src="@/assets/home/count-user.png" alt="" />
        <div class="count-panel">
          <p class="count-num">{{ dataList.countObj.userNumber }}</p>
          <span class="count-label">用户数</span>
        </div>
      </div>
      <div class="home_count_item mid">
        <img src="@/assets/home/count-course.png" alt="" />
        <div class="count-panel">
          <p class="count-num">
            {{ dataList.countObj.course }}
          </p>
          <span class="count-label">课程数</span>
        </div>
      </div>
      <div class="home_count_item mid">
        <img src="@/assets/home/count-class.png" alt="" />
        <div class="count-panel">
          <p class="count-num">{{ dataList.countObj.courseInfoNumber }}</p>
          <span class="count-label">开课数</span>
        </div>
      </div>
      <div class="home_count_item">
        <img src="@/assets/home/count-material.png" alt="" />
        <div class="count-panel">
          <p class="count-num">{{ dataList.countObj.resourceNumber }}</p>
          <span class="count-label">素材数</span>
        </div>
      </div>
    </div>

    <div style="justify-content: space-between; display: flex;width:60%">
      <div class="RCintro">
        <div class="RCintro-title">人才培养方案</div>
        <p class="RCintro-content">
          {{ '口腔教研室主要承担口腔医学、口腔医学技术、护理(口腔方向)内科学、口腔外科学、口腔修复学、口腔正畸学、口腔解剖生理学。修复工艺技术、可摘义齿修复工艺技术等主干课程的教学任务。' }}
        </p>
      </div>

      <div class="RCintro">
        <div class="RCintro-title">专业建设标准</div>
        <p class="RCintro-content">
          {{
      '坚持以服务为宗旨，以能力为本位，以就业为导向，走产学结合道路的办学理念，顺应口腔医学教育发展的总体趋势，遵循教育教学改革的客观规律，以大医学整体改革为基本依托，以人才培养方案和课程体系综合改革为核心内容，以发达国家口腔医学教育先进经验为对照借鉴，以创造性运用现代教育技术…。'
    }}
        </p>
      </div>
    </div>

    <div class="home-panel basic wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <CourseList title="专业基础课" :type="1" :list="dataList.basicCourse" more-url="/Course" theme="dark" />
    </div>

    <div class="home-panel core wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <CourseList title="专业核心课" :type="1" :list="dataList.coreCourse" more-url="/Course" />
    </div>

    <div class="home-panel expand wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <CourseList title="专业拓展课" :type="1" :list="dataList.expandCourse" more-url="/Course" theme="dark" />
    </div>

    <div class="home-panel core wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <CourseList title="其他" :type="1" :list="dataList.otherCourse" more-url="/Course" />
    </div>

    <div class="home-panel material wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <CourseList title="素材中心" :type="4" :list="dataList.MaterialList" more-url="/Material" cover-key="file"
        title-key="DocTitle" sub-key="" date-key="CreateTime" />
    </div>

    <!-- <div style="width:70%; margin-top: 50px; margin-bottom: 50px;">
      <img style="max-width: 100%; height: auto;" src="/src/assets/home/tupu.jpg" />
    </div> -->

    <div>
      <div style="position: relative; border: #efefef solid 1px; height: calc(100vh - 100px);width: 1100px; margin-top: 20px">
        <RelationGraph ref="relationGraph$" :options="options" :on-node-click="onNodeClick">
          <template #node="{ node }">
            <div style="color: rgb(0, 0, 0); position: absolute; margin-top: 5px; font-size: 16px; line-height: 25px; white-space: nowrap; left: 50px; bottom: 30px; transform-origin: left bottom; transform: rotate(-0.435873deg);">{{ node.text }}</div>
          </template>
        </RelationGraph>
        <div class="legendBox">
          <!-- <div style="margin-bottom: 5px; color: #666666" v-for="(value ,key) in nodeList.cateCount" :key="key">
            <span style="background: rgb(20, 95, 223); display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="width: 80px; display:inline-block; font-size: 12px;vertical-align: middle;">{{key}}</span>
            <span style="font-size: 12px">{{value}} </span>
          </div> -->
          <div style="margin-bottom: 5px; color: #666666" >
            <span style="background: rgb(20, 95, 223); display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>

            <span style="font-size: 12px">{{'资源库'}} </span>
          </div>
          <div style="margin-bottom: 5px; color: #666666">
            <span style="background: rgb(128, 176, 255); display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{'专业'}} </span>
          </div>
          <div style="margin-bottom: 5px; color: #666666">
            <span style="background: #42D9A3; display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{'课程'}} </span>
          </div>
        </div>

        <!-- <div class="legendBox2">
          <div style="margin-bottom: 5px; color: #666666" v-for="(value ,key) in linkData" :key="key">
            <span style="background: #F75A00; display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{value.name+'关系'}} </span>
          </div>
        </div> -->

        <div class="legendBox2">
          <div style="margin-bottom: 5px; color: #666666" >
            <span style="background: #F75A00; display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{'包含关系'}} </span>
          </div>
          <div style="margin-bottom: 5px; color: #666666" >
            <span style="background: #42D9A3; display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{'并列关系'}} </span>
          </div>
          <div style="margin-bottom: 5px; color: #666666" >
            <span style="background: #145FDF; display:inline-block; width: 14px; height: 14px; border-radius:50%;margin-right: 10px;vertical-align: middle;"></span>
            <span style="font-size: 12px">{{'先后关系'}} </span>
          </div>
        </div>
        
      </div>
    </div>

    <div class="group wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s">
      <div class="group-title">建设团队</div>
      <div class="group_bottom">
        <div class="group_bottom_l">
          <p>
            主持院校：
            <template v-if="dataList.hostList.obj && dataList.hostList.obj.length">
              <span v-for="(item, index) in dataList.hostList.obj" :key="index">
                {{ item.UnitName }}
              </span>
            </template>
          </p>
        </div>
        <div class="group_bottom_r">
          <p>
            参建单位：
            <template v-if="dataList.joinUnit.obj && dataList.joinUnit.obj.length">
              <span class="group_bottom_t" v-for="(item, index) in dataList.joinUnit.obj" :key="index">
                {{ item.UnitName }}
              </span>
            </template>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import icon1 from "/src/assets/home/top-icon1.png";
import icon2 from "/src/assets/home/top-icon2.png";
import icon3 from "/src/assets/home/top-icon3.png";
import icon4 from "/src/assets/home/top-icon4.png";
import feature4 from "/src/assets/home/feature4.png";
import feature5 from "/src/assets/home/feature5.png";
import tupuimage from "/src/assets/home/tupu.jpg"

import WOW from "wow.js";
import CourseList from "@/components/CourseList.vue";
import { useRouter } from "vue-router";

import {
  reactive,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
} from "vue";
import {
  getMaterialList,
  getCourse,
  statisticsAllInfoByMajor,
  getTeam,
  getProProfile,
  getBannerList,
  getKnowledgeList
} from "@/api/home.js";

import RelationGraph, { RGJsonData, RGNode, RGUserEvent } from 'relation-graph/vue3'
const relationGraph$ = ref()
const options = {
  defaultLineShape: 1,
  defaultNodeBorderWidth: 0,
  defaultNodeWidth: 40,
  defaultNodeHeight: 40,
  defaultLineColor: "#F75A00",
  defaultNodeColor: "#42D9A3",
  label: "知识图谱",
  layoutName: "center",
  layoutClassName: "seeks-layout-center",
  distance_coefficient: 1,
  layouts: [{
    label: "中心",
    layoutName: "center",
    centerOffset_x: 0,
    centerOffset_y: 0,
    distance_coefficient: 1,
    maxLayoutTimes: 300,
    force_node_repulsion: 1,
    force_line_elastic: 1
  }],
  defaultJunctionPoint: "border"
}

let nodeList = {}

const topMenuBtn = [{
  name: "展开节点",
  icon: "el-icon-caret-bottom",
  type: "primary",
  plain: !0,
  clickName: "see"
}]
const nodeFlag = 1
const nodeData = [{
  name: "资源库",
  color: "#145FDF",
  shadow: "rgba(20,95,223,0.3)",
  Num: 0
}, {
  name: "专业",
  color: "#80B0FF",
  shadow: "rgba(128,176,255,0.3)",
  Num: 0
}, {
  name: "课程",
  color: "#42D9A3",
  shadow: "rgba(66,217,163,0.3",
  Num: 0
}, {
  name: "一级节点",
  color: "#42D8D9",
  shadow: "rgba(66,216,217,0.3)",
  Num: 0
}, {
  name: "二级节点",
  color: "#90D942",
  shadow: "rgba(144,217,66,0.3)",
  Num: 0
}, {
  name: "三级节点",
  color: "#FFBB51",
  shadow: "rgba(255,187,81,0.3)",
  Num: 0
}]
const linkData = [{
  name: "包含",
  type: "0",
  color: "#F75A00"
}, {
  name: "并列",
  type: "1",
  color: "#42D9A3"
}, {
  name: "先后",
  type: "2",
  color: "#145FDF"
}]


const onNodeClick = (node, e) => {
  console.log('onNodeClick:', node.id);
  return true;
}





const router = useRouter();
const projectId = ref("dxhzalctqitlv9umq3wtdg");
const videoDom = ref(null);
const questionR = ref(null);
const qLeft = ref(0);
const qTop = ref(0);
const offTop = ref(true);
const offLeft = ref(true);

const dataList = reactive({
  basicCourse: [],
  coreCourse: [],
  expandCourse: [],
  otherCourse: [],
  MaterialList: [],
  countObj: {},
  hostList: {},
  joinUnit: {},
  videoSrc:
    "http://1315193631.vod2.myqcloud.com/f3bd57a3vodcq1315193631/8b9e4b32243791576106308906/TasyuAooScoA.mp4",
  isPlay: false,
  introduced: "暂无介绍",
  question: true,
  timers: null,
  knowledgeList: {}
});
const topTab = [
  {
    text: "教师用户",
    en: "TEACHER USERS",
    img: icon1,

    id: 1,
  },
  {
    text: "学生用户",
    en: "STUDENT USERS",
    img: icon2,
    id: 2,
  },
  {
    text: "企业用户",
    en: "ENTERPRISE USERS",
    img: icon3,
    id: 3,
  },
  {
    text: "社会学习者",
    en: "SOCIAL LEARNERS",
    img: icon4,
    id: 4,
  },
];
const featureList = [
  {
    text: "虚拟仿真",
    img: feature4,
    url: "http://kouqiangfangzhen.haimijiaoyu.com/home",
  },
  {
    text: "医师模考",
    img: feature5,
    url: "http://kouqiangfangzhen.haimijiaoyu.com/login", //"/Exams",
  },
];
// https://www.icve.com.cn/portalproject/themes/default/dxhzalctqitlv9umq3wtdg/sta_page/assets/home/feature3.png
const industryList = ref([]);

onMounted(() => {



  dataList.timers = setInterval(moveF, 50);
  var wow = new WOW({
    boxClass: "wow", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function (box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});
onBeforeMount(() => {
  getCourseFunc("专业基础课", "basicCourse");
  getCourseFunc("专业核心课", "coreCourse");
  getCourseFunc("专业拓展课", "expandCourse");
  getCourseFunc("公共基础课", "otherCourse");
  getMaterialListF();
  getProjectCountF();
  getTeamF();
  getProProfileF();
  industryF();
  getKnowledgeListF();
});
onBeforeUnmount(() => {
  clearInterval(dataList.timers);
});
const moveF = () => {
  qLeft.value = questionR.value.offsetLeft;
  qTop.value = questionR.value.offsetTop;
  if (questionR.value.offsetLeft <= 0) {
    offLeft.value = true;
  } else if (
    questionR.value.offsetLeft + questionR.value.clientWidth >=
    window.innerWidth
  ) {
    offLeft.value = false;
  }
  if (questionR.value.offsetTop <= 0) {
    offTop.value = true;
  } else if (
    questionR.value.offsetTop + questionR.value.clientHeight >=
    window.innerHeight
  ) {
    offTop.value = false;
  }
  if (offLeft.value) {
    qLeft.value += 2;
  } else {
    qLeft.value -= 2;
  }
  if (offTop.value) {
    qTop.value += 3;
  } else {
    qTop.value -= 3;
  }
};
const enterBox = () => {
  console.log("进入");
  clearInterval(dataList.timers);
};
const leaveBox = () => {
  console.log("移出");
  dataList.timers = setInterval(moveF, 50);
};
const closeQuestion = () => {
  dataList.question = false;
  clearInterval(dataList.timers);
};
const goQuestion = () => {
  // router.push("/questionnaire");
  window.open('https://www.wjx.cn/vm/rUtxKVo.aspx#')
  // router.push("/test123")
};
const playVideo = () => {
  dataList.isPlay = true;
  videoDom.value.play();
};
const gomore = (url) => {
  if (url.startsWith("http") || url.startsWith("https")) {
    window.open(url);
  } else {
    router.push(url);
  }
};
const goUserCenter = (item) => {
  router.push({
    path: "/UserCenter",
    query: item,
  });
};
const goNewsDetail = (url) => {
  window.open(url);
};
const getCourseFunc = (educationType, key) => {
  var data = {
    projectId: projectId.value,
    // majorId: '7ce9d8ab-51fb-4044-9dd1-78dddd3b848e',
    courseType: "学历课程",
    hot: true,
    pagesize: 4,
    educationType,
  };
  getCourse(data).then((res) => {
    let resultData = res.list && JSON.parse(res.list).obj;
    if (educationType == "专业核心课") {
      let xxx = {
        "id": "kbeiabctlbnpoydktbtoyq",
        "projectGroupId": "dxhzalctqitlv9umq3wtdg",
        "projectGroupName": "口腔医学（河南护理）",
        "coursetitle": "口腔内科学",
        "code": null,
        "typeId": null,
        "facultyId": null,
        "facultyName": null,
        "majorId": "x4ndarmm2pphygzhr2w3qa",
        "majorName": "口腔医学",
        "cover": "https://file.icve.com.cn/file_doc_public/158/974/27BF3A821EDCBC215675AC737E6811B8.jpg",
        "overviewVideo": null,
        "trainingType": null,
        "trainingTypeName": null,
        "courseLevel": "专业方向课（中层）",
        "courseType": "学历课程",
        "checkName": "孟琨",
        "displayname": "石娟",
        "userId": "qocyae2n8abedblmfwfxga",
        "checkId": "enhzalctzkzdwepyb7ddbw",
        "DateCreated": "2021-09-27 16.18.34",
        "time": "2021-09-27",
        "schoolId": "mdyvae2n1llk0u6hczn8iw",
        "schoolName": "河南护理职业学院",
        "introduce": "<p>口腔内科学是一门口腔医学的临床综合学科，主要研究牙体牙髓病、牙周病、口腔黏膜病等口腔常见疾病。口腔内科学与口腔颌面外科学、口腔修复学、口腔正畸学又有着诸多紧密联系，是一门专业核心课程。</p>",
        "recommend": "",
        "classHour": "188",
        "courseKeyWordVoList": null,
        "courseMajors": null,
        "coursePosts": null,
        "projectUserVo": null,
        "checkProjectUserVo": null,
        "certId": null,
        "isCert": false,
        "certName": null,
        "certType": null,
        "projectSourceName": null,
        "educationType": "专业核心课",
        "atlas": true,
        "exports": true,
        "courseInfoVoList": null,
        "pageView": 156604,
        "peopleNumber": 2562
      }
      // resultData.push(xxx)
    }
    dataList[key] = resultData
  });
};
const getMaterialListF = () => {
  let data = {
    projectId: projectId.value,
    hot: true,
    pagesize: 4,
  };
  getMaterialList(data).then((res) => {
    dataList.MaterialList = res.list && JSON.parse(res.list).obj;
  });
};
const getProjectCountF = () => {
  statisticsAllInfoByMajor({
    majorId: "7ce9d8ab-51fb-4044-9dd1-78dddd3b848e",
  }).then((res) => {
    dataList.countObj = res.data;
  });
};
const getTeamF = () => {
  getTeam({
    projectId: projectId.value,
  }).then((res) => {
    dataList.hostList = res.hostList ? JSON.parse(res.hostList) : {};
    dataList.joinUnit = res.joinUnit ? JSON.parse(res.joinUnit) : {};
  });
};
const getProProfileF = () => {
  getProProfile({
    projectId: projectId.value,
  }).then((res) => {
    dataList.introduced = res.proProfile;
  });
};
const industryF = () => {
  getBannerList({
    cate_id: 337,
  }).then((res) => {
    industryList.value = res?.list || [];
  });
};

const getKnowledgeListF = () => {

  getKnowledgeList({
    proId: 'dxhzalctqitlv9umq3wtdg',
  }).then((res) => {
    console.log('===>', res)
    nodeList = res
    // knowledgeList.value = res?.list || [];

    // this.lineList = Object(r["a"])(e.edges).sort((function(e, o) {
    //                   var i = 0
    //                     , n = 0;
    //                   return t.linkData.forEach((function(t, a) {
    //                       t.name == e.type && (i = a),
    //                       t.name == o.type && (n = a)
    //                   }
    //                   )),
    //                   i - n
    //               }
    //               )),
    let myNodeData = []
    res.nodes.forEach(item => {
      let nodeData = { 
        text: "", 
        id: "" ,
        fontColor:'#000000',
      };

      nodeData.text = item.name
      nodeData.id = item.id,
        myNodeData.push(nodeData)
    });

    let lineListData = []
    res.edges.forEach(item => {
      item.from = item.startId;
      item.to = item.endId
    });

    // lineList.forEach((function(e) {
    //     e.from = e.startId,
    //     e.to = e.endId,
    //     e.data = {
    //         mylinkData: e
    //     },
    //     "1" == e.type ? (e.type = o.linkData[e.type].name,
    //     e.isHideArrow = !0) : "2" == e.type && (e.type = o.linkData[e.type].name),
    //     o.linkData.forEach((function(t) {
    //         e.type == t.name && (e.color = t.color,
    //         e.fontColor = "rgba(0,0,0,0)")
    //     }
    //     ))
    // }
    // )),



      console.log(myNodeData)
    const graphJsonData = {
      rootId: '1152072285003825152',
      // nodes: [
      //   { id: 'N4', text: '十4' },
      //   { id: 'N5', text: '十5' },
      //   { id: 'N6', text: '十6' },
      //   { id: 'N7', text: '十7' },
      //   { id: 'N3', text: '十三' },
      //   { id: 'N9', text: '152****3393' },
      // ],
      nodes: myNodeData,
      lines: res.edges
      // lines: [
      //   { from: 'N3', to: 'N9', text: '分享' },
      //   { from: 'N3', to: 'N4', text: '分享444' },
      //   { from: 'N3', to: 'N5', text: '分享555' },
      //   { from: 'N3', to: 'N6', text: '分享666' },
      //   { from: 'N3', to: 'N7', text: '分享777' },
      //   { from: 'N9', to: 'N4', text: '分享x' }
      // ],
    };
    console.log('111', graphJsonData)


    relationGraph$.value.setJsonData(graphJsonData, () => {
      console.log('relationGraph ready!');
    })



  });
};
</script>

<style lang="scss" scoped>
$width: 1074px;

@media screen and (min-width: 1200px) {
  .question_box {
    width: 180px;
    height: 240px;
    position: fixed;
    bottom: 5vw;
    right: 2vw;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: url("@/assets/home/q_back.png");
    background-size: cover;
    cursor: pointer;
    z-index: 999;
    transition: all 0.05s;

    .close {
      width: 16px;
      height: 16px;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    h3 {
      font-size: 30px;
      font-weight: 400;
      color: #ffffff;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    }

    .q_icon {
      width: 92px;
      height: 92px;
    }

    button {
      padding: 10px 20px;
      background: #ffffff;
      border-radius: 37px;
      font-size: 16px;
      font-weight: 400;
      color: #1cabd9;
      border: none;
    }
  }

  .home_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .legendBox{ 
      z-index: 1001;
      position: absolute;
      top: 30px;
      left: 5px
    }

    .legendBox2{ 
      z-index: 1001;
      position: absolute;
      top: 120px;
      left: 5px
    }

    .home_top {
      width: $width;
      height: 80px;
      background: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(142, 142, 142, 0.4);
      border-radius: 10px;
      padding: 15px 36px;
      margin: -30px 0 40px;
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: space-between;

      .home_top_item {
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.5s;

        img {
          width: 50px;
          height: 50px;
          margin-right: 8px;
        }

        div {
          display: flex;
          flex-direction: column;

          p {
            // width: 100px;
            font-size: 14px;
            font-weight: bold;
            color: #1cabd9;
            margin-bottom: 4px;
          }

          span {
            // width: 100px;
            font-size: 10px;
            font-weight: 400;
            color: #666666;
          }
        }
      }

      .home_top_item:hover {
        // transform: translate(-10px,-10px);
        // transform: scale(1,1);
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
      }
    }



    .RCintro {
      border: 0.5px solid gray;
      width: 48%;
      height: 200px;
      // padding: 14px 22px 20px 28px;
      margin-bottom: 50px;
      margin-top: 50px;
      line-height: 20px;
      font-size: 14px;
      color: #222222;
      justify-content: space-between;
       box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.3);

      &-title {
        background-color: #58b2eb;
        text-align: center;
        line-height: 60px;
        margin-bottom: 15px;
        font-size: 40px;
        font-weight: bold;
        color: white;
      }

      &-content {
        // text-align: center;
        padding-right: 30px;
        padding-left: 30px;
        overflow-y: auto;
      }
    }

    .home_center {
      width: $width;
      margin-bottom: 30px;
      display: flex;

      .center_left {
        // width: 478px;
        width: 70%;
        padding-right: 14px;

        .video_top {
          box-shadow: 0 0 6px 0 rgba(142, 142, 142, 0.4);

          .video_box {
            width: 100%;
            height: 456px;
            position: relative;

            video {
              width: 100%;
              height: 456px;
            }

            .mask {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: rgba(0, 0, 0, 0.5);
              z-index: 10;
              display: flex;
              justify-content: center;
              align-items: center;

              .icon-control {
                width: auto;
                height: 39px;
                cursor: pointer;
              }
            }
          }

          .intro {
            width: 100%;
            height: 255px;
            padding: 14px 22px 20px 28px;
            line-height: 20px;
            font-size: 14px;
            color: #222222;

            &-title {
              line-height: 30px;
              margin-bottom: 4px;
              font-size: 20px;
              font-weight: bold;
            }

            .el-scrollbar {
              height: calc(100% - 42px);
            }

            &-content {
              padding-right: 30px;
              overflow-y: auto;
            }
          }
        }
      }



      .center_right {
        // width: calc(100% - 478px);
        width: 30%;

        &>div {
          width: 100%;
          background: #ffffff;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          box-shadow: 0 0 6px 0 rgba(142, 142, 142, 0.4);
        }

        .ri_title {
          width: 100%;
          height: 61px;
          background-image: linear-gradient(#ff9933, #ff9933),
            linear-gradient(#ffffff, #ffffff);
          background-blend-mode: normal, normal;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          font-weight: bold;
          color: #fff;
        }

        .feature {
          margin-bottom: 13px;

          nav {
            height: 187px;
            padding-top: 20px;

            li {
              width: 225px;
              height: 64px;
              padding-left: 32px;
              background-image: linear-gradient(135deg,
                  #fff5eb 0%,
                  #fffdfc 100%),
                linear-gradient(#ffffff, #ffffff);
              background-blend-mode: normal, normal;
              border-radius: 16px;
              border: 1px solid #ff9a03;
              display: flex;
              align-items: center;
              margin-bottom: 14px;
              cursor: pointer;

              &:last-child {
                margin-bottom: 0;
              }

              .img-wrap {
                width: 38px;
                margin-right: 22px;
                display: flex;
                align-items: center;

                img {
                  width: 100%;
                  height: auto;
                }
              }

              p {
                font-size: 18px;
                font-weight: bold;
                color: #222222;
              }
            }
          }
        }

        .industry {
          .el-scrollbar {
            width: 100%;
            height: 388px;
            padding: 10px 20px;
          }

          nav {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .news-item {
              line-height: 28px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .desc {
                width: percentage(178/254);
                flex-wrap: nowrap;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #222222;
              }

              .date {
                font-size: 11px;
                color: #b4b4b4;
              }
            }
          }
        }
      }
    }

    .home_count {
      width: $width;
      margin-bottom: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_item {
        display: flex;
        align-items: center;

        &.mid {
          img {
            width: 40px;
          }
        }

        img {
          width: 50px;
        }

        .count-panel {
          margin-left: 16px;
        }

        .count-num {
          line-height: 31px;
          min-height: 31px;
          font-size: 21px;
          font-weight: bold;
          color: #1dabd9;
        }

        .count-label {
          line-height: 20px;
          font-size: 12px;
          color: #222222;
        }
      }
    }

    .home-panel {
      width: 100%;
      padding: 26px 0;

      &.basic,
      &.material {
        background: #f7f7f7;
      }

      &.expand {
        // height: calc(320 / 19.2) * 1vw;
        background: #1676a8 url("@/assets/home/pic-school.png") no-repeat center bottom;
        background-size: 100% 100%;

        ::v-deep {
          .panel-title {
            color: #fff;
          }

          .more-entry {
            border-color: #fff;
            color: #fff;
          }
        }
      }

      .course-list-wrapper {
        width: $width;
        margin: 0 auto;
      }
    }

    .group {
      width: 100%;
      height: calc(215 / 12.8) * 1vw;
      padding: 45px 0;
      margin: 0 auto;
      background: #127cbf url("@/assets/home/pic-footer.png") no-repeat center bottom;
      background-size: 100% auto;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      .group-title {
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
      }

      .group_bottom {
        line-height: 50px;
        padding: 20px 0;
        display: flex;
        align-items: center;
        font-size: 16px;
        letter-spacing: 1px;

        &_l {
          margin-right: 173px;
        }
        &_t {
          margin-right: 10px;
        }
      }
    }
  }

  .project_ri {
    height: 34px;
    display: flex;
    align-items: center;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #1cabd9;

    p {
      color: #ffffff !important;
      background-color: #1cabd9;
      height: 34px;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 10px;
      margin-right: 34px;
    }

    p::after {
      content: "";
      position: absolute;
      right: -34px;
      top: 0;
      width: 34px;
      border-width: 0 0 34px 34px;
      border-style: none solid solid;
      border-color: transparent transparent #1cabd9;
      z-index: -1;
      transform: rotate(-180deg);
    }

    img {
      width: 28px;
      height: 28px;
    }
  }
}

@media screen and (max-width: 1200px) {
  .question_box {
    display: none;
  }

  .home_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .home_top {
      width: 95vw;
      background: #ffffff;
      box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
      border-radius: 1.3vw;
      padding: 4vw 4vw 1vw 4vw;
      margin: -3vw 0 4vw;
      position: relative;
      z-index: 10;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .home_top_item {
        width: 38vw;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 3vw;

        img {
          width: 10vw;
          height: 10vw;
          margin-right: 2vw;
        }

        div {
          display: flex;
          flex-direction: column;

          p {
            width: 30vw;
            font-size: 2.9vw;
            font-weight: bold;
            color: #1cabd9;
            margin-bottom: 1vw;
          }

          span {
            width: 30vw;
            font-size: 1.8vw;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }

    .home_center {
      width: 95vw;
      display: flex;
      flex-direction: column-reverse;

      .center_left {
        width: 95vw;
        margin-top: 4vw;

        .video_top {
          .video_box {
            width: 95vw;
            // height: 32.4vw;
            position: relative;

            video {
              width: 95vw;
              // height: 32.4vw;
            }

            .mask {
              opacity: 0;
              display: none;
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: rgba(0, 0, 0, 0.5);
              z-index: -1;
              display: flex;
              justify-content: center;
              align-items: center;

              .icon-control {
                width: 8vw;
                height: 9vw;
                cursor: pointer;
              }
            }
          }

          .intro {
            width: 95vw;
            padding: 3vw 0;
            line-height: 1.5;
            font-size: 3vw;
            color: #222222;

            &-title {
              margin-bottom: 2vw;
              font-size: 4vw;
              font-weight: bold;
            }
          }
        }
      }

      .center_right {
        width: 95vw;

        &>div {
          width: 95vw;
          background: #ffffff;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          box-shadow: 0 0 6px 0 rgba(142, 142, 142, 0.4);
        }

        .ri_title {
          width: 100%;
          height: 7vw;
          background-image: linear-gradient(#ff9933, #ff9933),
            linear-gradient(#ffffff, #ffffff);
          background-blend-mode: normal, normal;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 3vw;
          font-weight: bold;
          color: #fff;
        }

        .feature {
          margin-bottom: 4vw;

          nav {
            width: 100%;
            height: 16vw;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
              width: 25vw;
              height: 10vw;
              background-image: linear-gradient(135deg,
                  #fff5eb 0%,
                  #fffdfc 100%),
                linear-gradient(#ffffff, #ffffff);
              background-blend-mode: normal, normal;
              border-radius: 1.333vw;
              border: 1px solid #ff9a03;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 3.7vw;

              img {
                width: 5vw;
                display: block;
              }

              p {
                font-size: 2.66vw;
                font-weight: 600;
                color: #ff9933;
                white-space: nowrap;
              }
            }
          }
        }

        .industry {
          .el-scrollbar {
            width: 100%;
            height: 40vw;
          }

          nav {
            padding: 3vw 5vw;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .news-item {
              line-height: 2;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .desc {
                width: 80%;
                flex-wrap: nowrap;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 3vw;
                color: #222222;
              }

              .date {
                font-size: 2vw;
                color: #b4b4b4;
              }
            }
          }
        }
      }
    }

    .home_count {
      width: 95vw;
      margin-bottom: 4vw;
      margin-top: 2vw;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_item {
        display: flex;
        align-items: center;
        line-height: 1;

        .count-panel {
          margin-left: 1.5vw;
        }

        img {
          width: 8vw;
          height: auto;
        }

        .count-num {
          min-height: 3.5vw;
          font-size: 3.5vw;
          font-weight: bold;
          color: #1dabd9;
        }

        .count-label {
          font-size: 1.5vw;
          color: #222222;
        }
      }
    }

    .home-panel {
      width: 100%;
      padding: 11vw 0 14vw;

      &.basic {
        padding-top: 10vw;
        background: #f7f7f7;
      }

      &.expand {
        background: #1676a8 url("@/assets/home/pic-school.png") no-repeat center bottom;
        background-size: 100% 100%;

        ::v-deep {
          .panel-title {
            color: #fff;
          }

          .more-entry {
            border-color: #fff;
            color: #fff;
          }
        }
      }

      .course-list-wrapper {
        width: 95vw;
        margin: 0 auto;
      }
    }

    .group {
      width: 100%;
      height: calc(320 / 19.2) * 1vw;
      padding: 1vw 0;
      margin: 0 auto;
      background: #127cbf url("@/assets/home/pic-footer.png") no-repeat center bottom;
      background-size: 100% auto;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      .group-title {
        font-size: 3vw;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .group_bottom {
        display: flex;
        align-items: center;
        font-size: 2vw;

        &_l {
          margin-right: 5vw;
        }
      }
    }
  }

  .project_ri {
    height: 6vw;
    display: flex;
    align-items: center;
    border-radius: 0.5vw;
    border: 1px solid #1cabd9;

    p {
      font-size: 2vw;
      color: #ffffff;
      background-color: #1cabd9;
      height: 6vw;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 1vw;
      margin-right: 6vw;
    }

    p::after {
      content: "";
      position: absolute;
      right: -6vw;
      top: 0;
      width: 6vw;
      border-width: 0 0 6vw 6vw;
      border-style: none solid solid;
      border-color: transparent transparent #1cabd9;
      z-index: -1;
      transform: rotate(-180deg);
    }

    img {
      width: 4vw;
      height: 4vw;
    }
  }

}
</style>
